<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Testing SimpleTextArea | The Dojo Toolkit</title>

		<style type="text/css">
			@import "../../themes/claro/document.css";
			@import "../css/dijitTests.css";
		</style>

	<!-- required: the default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../dojo/dojo.js"
		data-dojo-config="isDebug: true, parseOnLoad: true"></script>

	<!-- only needed for alternate theme testing: -->
	<script type="text/javascript" src="../_testCommon.js"></script>

	<script type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.form.SimpleTextarea");

		// needed for tests
		dojo.require("dijit.layout.BorderContainer");
	</script>
</head>

<body class="claro" style="padding:20px">

		<h1 class="testTitle">SimpleTextarea</h1>

		<p>
			This is a simple text area that doesn't automatically size itself according to it's content.
			It can be used inside layout containers.
		</p>

		<h2>Plain textarea (rows=5, cols=50), selectOnClick=true</h2>
		<textarea id="ta1" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"ta1", rows:"5", cols:"50",
			onFocus:function(){ console.log("user focus handler") },
			onBlur:function(){ console.log("user blur handler") },
			onChange:function(val){ dojo.byId("oc1").value = "" + val; },
			selectOnClick:true
		'>
			shichashaw, textarea text baw.
		</textarea>
		onChange:<textarea id="oc1" rows="6" cols="50" disabled >not fired yet!</textarea>
		<span style='white-space:nowrap;'>
		<button id="resetButton" onclick="dijit.byId('ta1').reset();">reset</button>
		<button id="setNullButton" onclick="dijit.byId('ta1').set('value', null);">set value to null</button>
		<button id="getValueButton" onclick="dojo.byId('gv1').value=''+dijit.byId('ta1').get('value');">get value</button>
		<textarea id="gv1" rows="6" cols="50" disabled >no value yet!</textarea>
		</span>


		<h2>Plain textarea with style="height: 300px; width: 300px" rows="" cols=""</h2>
		<textarea id="ta2" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"ta2",
			style:{height:"300px", width:"300px"}, rows:"", cols:""'>I have a style setting rather than rows/cols setting</textarea>

		<h2>In a BorderContainer</h2>

		<div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='style:{width:"500px", height:"400px", border:"inset gray 3px"}'>
			<textarea id="top" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"top", region:"top", splitter:true, style:{height:"100px"}'>
				This is just some text in the top region.
			</textarea>
			<textarea id="left" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"left", region:"left", splitter:true, style:{width:"200px"}'>
				This is just some text in the left region.
			</textarea>
			<textarea id="center" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"center", region:"center"'>
				This is just some text in the center region.
			</textarea>
			<textarea id="right" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"right", region:"right", splitter:true, style:{width:"200px"}'>
				This is just some text in the right region.
			</textarea>
			<textarea id="bottom" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"bottom", region:"bottom", splitter:true, style:{height:"100px"}'>
				This is just some text in the bottom region.
			</textarea>
		</div>

		<script>
			function setAttr(attr, value){
				dijit.registry.byClass('dijit.form.SimpleTextarea').forEach(function(widget){ widget.set(attr, value);});
			}
		</script>
		<input type="button" onclick="setAttr('readOnly', false);" value="Remove readOnly"/>
		<input type="button" onclick="setAttr('readOnly', true);" value="Set readOnly"/>
		<input type="button" onclick="setAttr('disabled', true);" value="Disable"/>
		<input type="button" onclick="setAttr('disabled', false);" value="Enable"/>
</body>
</html>
